<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


	<head>
		<title>用户注册</title>
		<link type="image/x-icon" rel="Shortcut Icon"
			href="<%=basePath%>Images/favicon.ico" />
		<link type="text/css" rel="stylesheet"
			href="<%=basePath%>CSS/Yiian_Style.css" />
		<link type="text/css" rel="stylesheet"
			href="<%=basePath%>CSS/Yiian_Register.css" />
		<link type="text/css" rel="stylesheet"
		href="<%=basePath%>CSS/remind.css" />
		<link type="text/css" rel="stylesheet"
		href="<%=basePath%>CSS/common/common.css" />
		<script type="text/javascript" src="<%=basePath%>JS/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>JS/common/valid.js"></script>

		<script language="javascript">           
			/*验证码上刷新 */ 
			function chk_image(){ 
			    var img = document.getElementById("pic"); 
			    img.src = "image.jsp?" + Math.random(); 
			    getYanzhengma();
			} 
			
			//验证邮箱正确性
			function validateEmail(_email){
				var flag = true;
				if (_email.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1){
						return true;
				}else {
					return false;
				}
			
			}
			
			//定义全局变量，用于保存验证码
			var randValue ;
			function getYanzhengma(){

				//因为页面刚刚加载时，Session中的值是上次的，所以要用Ajax在页面加载后，重新取一下值
				$.ajax({
					type : "post",
					url : "<%=basePath%>Right/getSessionValue.action",
					dataType : "json",
					data :{"key" : "rand"},
					success : function(_result) {
						randValue = _result.rand;

						//$("#yanzhengma").val(randValue);
					},
					error:function(){
						alert("网络异常，请刷新页面！");
					}
				});
			}

			//边框 变红/褪色 函数
			function borderRemind(_target,_boolean){
				if(!_boolean){
					_target.removeClass("iconok");
					_target.addClass("iconerror");
				}else{
					_target.removeClass("iconerror");
					_target.addClass("iconok");
				}
			}
			
			$(document).ready(function(){
				getYanzhengma();
				
				 //$("#account").focus();
				//邮箱失去焦点时
				 $("#account").blur(function(){
				 	var result = validateEmail($(this).val());
				 	borderRemind($(this).next("img"), result);
				 });
				 $("#yanzhengma").bind("blur keyup", function(){
					 //alert($(this).siblings().filter("img:eq(1)").attr("src"));
					 borderRemind($(this).siblings().filter("img:eq(1)"), $(this).val().length == 4 && $(this).val().toLowerCase() == randValue.toLowerCase() );
					
				 });
				 $("#password").bind("blur keyup", function(){
					 borderRemind($(this).next("img"), $(this).val().length > 5 && "" != $.trim($(this).val()) );
				 });
				 
				//注册功能
				$("#regbtn").click(function(){
			
					if(!valid("#toBeValid")){
						return false;
					}
					if(!$("#agreePro").attr("checked")){
						alert("您未同意微讯网络服务使用协议！");
						return;
					}
					var params = {};
					params["user.username"] = $("#account").val();
					params["user.password"] = $("#password").val();
					
					$.ajax({
						type : "post",
						url : "<%=basePath%>Right/register.action",
						dataType : "json",
						data:params,
						success : function(_result) {
							window.location.href="<%=basePath%>Right/Activation.jsp";
							
						},
						error:function(){
							alert("注册失败！");
						}
					});

				});
			});
			
			
		</script>
	</head>


	<body>
		<div  style="display:none;">
			<input type="hidden" id=""/>
		</div>
		<div class="header">
			<a class="logo" href="http://www.wixun.com" title="微讯"><img
					src="<%=basePath%>Images/Logo.png" /> </a>
		</div>

		<div class="regtop">
			已有微讯或微讯会员账号？&nbsp;
			<a class="login" href="index.html">马上登录</a>
		</div>

		 
		<div name="zhuce" >
			<div class="main">
				<div class="left">
					<div class="left1">
						&nbsp;
					</div>
					<div class="left2">
						<img src="<%=basePath%>Images/regleft2.jpg" border="0"
							usemap="#Map" />
						<map name="Map" id="Map">
							<area shape="rect" coords="107,13,174,32" href="#" />
							<area shape="rect" coords="235,3,303,22" href="#" />
							<area shape="rect" coords="50,62,117,81" href="#" />
						</map>
					</div>
					<div class="left3">
						&nbsp;
					</div>
				</div>
				<ul class="right" id="toBeValid">
					<li class="text">
						<span class="da">电子邮箱：</span>
						<input type="text" class="regtxt txt" id="account" name="zhanghao"
							value="" cv="empty email" cn="电子邮箱"/>
							<img height="15" width="15" class="wbIcon" src="<%=basePath%>Images/common/transparent.gif">
					</li>
					<li class="text">
						<span class="da">创建密码：</span>
						<input type="password" class="regtxt txt" id="password"
							name="mima" value="" cv="empty nolength" len="6" cn="密码长度"/>
							<img height="15" width="15" class="wbIcon" src="<%=basePath%>Images/common/transparent.gif">
					</li>
					<li class="text">
						<span class="da"><span style="letter-spacing: 7px;">验证</span>码：</span>
						<input type="text" class="yantxt regtxt txt" id="yanzhengma"
							name="yanzheng" value="" />
						&nbsp;&nbsp;
						<img id="pic" border=1 src="image.jsp"
							onclick="return chk_image();" alt="30">
						&nbsp;&nbsp;
						<a style="text-decoration: underline;"
							href="javascript:chk_image();">换一张</a>&nbsp;&nbsp;
							<img height="15" width="15" class="wbIcon" src="<%=basePath%>Images/common/transparent.gif">
					</li>
					<li class="anniu text">
						<input type="checkbox" class="" id="agreePro" name="zhidong" />
						&nbsp;我已看过并同意
						<a class="xieyi" href="#">《微讯网络服务使用协议》</a>
					</li>
					<li class="anniu text">
						<input type="button" class="regbtn" id="regbtn" name="" value="" />
					</li>
				</ul>
			</div>

			<div class="formbottom">
				&nbsp;
			</div>

			<div class="mainbottom">
				&nbsp;
			</div>
		</div>

		<div class="copyright">
			<a class="links" href="#" target="_blank">帮助信息</a>-
			<a class="links" href="#" target="_blank">联系我们</a>-
			<a class="links" href="#" target="_blank">意见建议</a>-
			<a class="links" href="#" target="_blank">举报</a>-
			<a class="links" href="#" target="_blank">微讯首页</a>
			<br />
			Copyright&nbsp;&copy;&nbsp;2011&nbsp;&nbsp;Wixun.com&nbsp;&nbsp;Inc.&nbsp;&nbsp;All&nbsp;Rights&nbsp;Reserved.&nbsp;&nbsp;&nbsp;&nbsp;蛙扑公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有
		</div>

	</body>
</html>